<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="shortcut icon" th:href="@{/img/favicon.ico}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/video-publish.css}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

  <link rel="stylesheet" type="text/css" th:href="@{/editor-md/examples/css/style.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/editor-md/css/editormd.css}" />
  <style>
    .table tbody tr td{
      vertical-align: middle;
    }
    .btn-group button{
      background: #FFFFFF00;
      border: 1px solid #ff0909;
    }
  </style>

  <title>管理员界面 - 模块管理</title>

</head>
<body>

<!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/index"><i class="bi bi-house-door" style="color: #FFFFFF"></i></a>
    <a class="navbar-brand" href="#">管理员界面-板块</a>
    <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
      <li class="nav-item col-6 col-lg-auto">
      </li>
    </ul>
  </nav>

  <!-- Main Content -->
<div class="container">
<!--  搜索栏-->
  <form id="searchForm">
    <div class="row">
      <div class="col-md-5 form-group">
        <label for="sectionName">板块名:</label>
        <input type="text" class="form-control" name="sectionName" id="sectionName" placeholder="板块名称(支持模糊搜索)...">
      </div>
      <div class="col-md-5 form-group">
        <label for="userName">版主:</label>
        <input type="text" class="form-control" name="userName" id="userName" placeholder="版主名称...">
      </div>
      <div class="col-md-2 form-group">
        <label for="status">状态:</label>
        <select id="status" name="status" class="form-control">
          <option value="999">全选</option>
          <option value="0">正常</option>
          <option value="1">停用</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 form-group">
        <label for="startTime">开始时间:</label>
        <input type="datetime-local" class="form-control" name="startTime" id="startTime">
      </div>
      <div class="col-md-6 form-group">
        <label for="endTime">截止时间:</label>
        <input type="datetime-local" class="form-control" name="endTime" id="endTime">
      </div>
    </div>
    <div class="row">
      <div class="col-2 col-md-2 text-left">
        <button type="button" class="btn btn-sm btn-secondary mt-3" id="showAddBtn" style="color: #48c94a; background: rgba(72,201,74,0)">新增</button>
      </div>
      <div class="col-2 col-md-2 text-left">
        <input type="text" id="sectionNameNew" name="sectionNameNew" class="form-control mt-3 ml-3" placeholder="输入板块名称" style="display: none">
      </div>
      <div class="col-2 col-md-2 text-left">
        <button type="button" id="addSectionBtn" onclick="addSection()" class="btn btn-sm btn-secondary mt-3 ml-3" style="display: none" >提交</button>
      </div>
      <div class="col-6 col-md-6 text-right">
        <button type="button" class="btn btn-secondary mt-3 ml-3" onclick="clearSearch()">清除</button>
        <button type="submit" class="btn btn-primary mt-3 ml-3">搜索</button>
      </div>
    </div>
  </form>
  <hr class="my-3">
  <div class="table-responsive mt-4">
    <table class="table table-striped table-hover" id="dataContent" th:fragment="dataContent">
      <thead class="thead-dark">
      <tr class="vertical-align">
        <th>板块名</th>
        <th>版主</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="section:${sections}" class="vertical-align">
        <td th:text="${section.name}"></td>
        <td>
          <a th:href="@{|/user/profile/${section.userId}|}">
            <img th:if="${section.user != null}" th:src="${section.user.headerUrl}"
                 class="rounded-circle" style="width:40px;"/>
            <span th:text="${section.user != null} ? ${section.user.username} : '未指定版主'"></span>
          </a>
        </td>
        <td th:text="${section.status == 0 ? '启用' : '停用'}"></td>
        <td th:text="${#dates.format(section.createTime, 'yyyy年MM月dd日 HH:mm:ss')}"></td>
        <td>
          <div class="btn-group" role="group" th:if="user.type != 1">
            <button id="disableBtn" type="button" class="btn btn-sm btn-outline-danger" th:if="${section.status == 0}" th:onclick="changeStatus([[${section.id}]],1)">
              停用
            </button>
            <button id="enableBtn" type="button" class="btn btn-sm btn-outline-success" th:if="${section.status == 1}" th:onclick="changeStatus([[${section.id}]],0)">
              启用
            </button>
            <button id="changeMaster" type="button" class="btn btn-sm btn-outline-success" th:onclick="showForm([[${section.id}]])">
              更换版主
            </button>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

  <!-- 提示框 -->
  <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="hintModalLabel">选择用户</h5>
        </div>
        <div class="modal-body" id="hintBody">
          <div class="row">
            <form class="form-inline" id="moderatorForm">
              <div class="col-md-12">
                <input type="hidden" id="candidateSection" name="candidateSection">
                <input id="candidateName" name="candidateName" class="form-control" placeholder="输入用户名">
                <button type="button" class="form-control btn btn-primary btn-sm" onclick="searchUser()">查找</button>
              </div>
            </form>
          </div>
          <hr class="my-3">
          <div class="row">
          <table class="table table-borderless">
            <thead>
            <tr class="vertical-align">
              <th>用户</th>
              <th>选择</th>
            </tr>
            </thead>
            <tbody id="candidateBody">
            </tbody>
          </table>
        </div>
        </div>
      </div>
    </div>
  </div>

<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
<script th:src="@{/editor-md/editormd.min.js}"></script>
<script th:src="@{/js/alertBox.js}"></script>
<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/sectionManagement.js}"></script>

<!-- 自定义js-->
<script type="text/javascript">



</script>
</body>
</html>
